import { Button } from "antd";
import { LeftOutlined, RightOutlined } from "@ant-design/icons";
import { Props } from "./types";
import styles from "./index.module.less";
import { items } from "./config";
import { useState, useEffect } from "react";
import { useNavigate, useLocation } from "react-router-dom";
import useAppStore from "@/store/appStore";
const Header = (props: Props) => {
  const navigate = useNavigate();
  const location = useLocation();
  const appStore = useAppStore();
  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
  const [openKeys, setOpenKeys] = useState<string[]>(["/dashboard/message"]);
  const defaultOpenKeys = ["/dashboard/message"];
  const setCollapsed = () => {
    props.setCollapsed(!props.collapsed);
  };
  const menuClick = ({ key }: any) => {
    if (key === "logOut") {
      // 退出登录
      appStore.logOut();
    } else {
      navigate(key);
    }
  };
  const onOpenChange = (openKeys: string[]) => {
    setOpenKeys(openKeys);
  };

  useEffect(() => {
    setSelectedKeys([location.pathname]); // 现在类型匹配
  }, [location]);
  return (
    <div className={styles.header}>
      <div className="expand">
        <Button
          size="small"
          icon={props.collapsed ? <RightOutlined /> : <LeftOutlined />}
          onClick={setCollapsed}
        ></Button>
      </div>
      <div className="top-menu">
        <Menu
          mode="horizontal"
          defaultOpenKeys={defaultOpenKeys}
          openKeys={openKeys}
          selectedKeys={selectedKeys}
          theme="dark"
          items={items()}
          onOpenChange={onOpenChange}
          onClick={menuClick}
        />
      </div>
    </div>
  );
};
export default Header;
